<template>
  <div class="home">
    <headers></headers>
    <swiper :swiperList="swiperList"></swiper>
    <icons :iconsList="iconsList"></icons>
    <location></location>
    <hot :hotList="hotList"></hot>
    <like :likeList="likeList"></like>
    <activity :vacationList="vacationList"></activity>
  </div>
</template>

<script>
import headers from "./pages/headers";
import swiper from "./pages/swiper";
import icons from "./pages/icons";
import location from "./pages/location";
import hot from "./pages/hot";
import like from "./pages/like";
import activity from "./pages/activity";
import {mapState} from "vuex";

export default {
  name: "Home",
  components:{
    headers,
    swiper,
    icons,
    location,
    hot,
    like,
    activity
  },
  data(){
    return{
      swiperList:[],
      iconsList:[],
      likeList:[],
      hotList:[],
      vacationList:[],
      changeCity:''
    }
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHttp(){
      this.$http.get("/api/dataHome.json").then((res) =>{
        // console.log(res.data.data)
        const  data = res.data.data;
        data.forEach((item,index) => {
          if(item.city == this.city){
            // console.log(item);
            this.swiperList = item.swiperList
            this.iconsList = item.iconsList
            this.likeList = item.likeList
            this.hotList = item.hotList
            this.vacationList = item.vacationList
          }
        })

      })
    }
  },
  mounted() {
    this.changeCity = this.city
    this.getHttp()
  },
  activated() {
    if (this.changeCity != this.city){
      this.getHttp()
      this.changeCity = this.city
    }
    document.documentElement.scrollTop = 0
  }
}
</script>

<style scoped>
.home{
  background: #f5f5f5f5;
}
</style>
